<%@ page contentType="text/html;charset=UTF-8" %>
<%@ include file="/WEB-INF/views/include/taglib.jsp"%>
<html>
<head>
	<title>模板管理</title>
	<meta name="decorator" content="default"/>
    <link href="${ctxStatic}/draging/css/style.css" type="text/css" rel="stylesheet" />
    <script src="${ctxStatic}/draging/js/drag.js" type="text/javascript"></script>
    <style>
        .tu-con{width: 100%;height: 600px;margin-top: 30px;}
        .tu-con .tu-con-sou{width: 130px;float: left;margin-top: 30px;}
        .tu-con .tu-con-sou .tu-con-item{width: 120px;cursor: pointer;position: relative;border: 1px #357ebd solid;margin-top: -1px;}
        .tu-con .tu-con-sou >img{width: 50px;height: 50px;}
        .tu-con .tu-con-sou .tu-con-item span{text-align: center;}
        .tu-con .tu-con-sou .tu-con-item .tu-cur{position: absolute; bottom: 0; right: 0;}
        .tu-con .tu-con-sou .tu-con-item .tu-cur img { width: 25px; display: block; }
    </style>
	<script type="text/javascript">
		$(document).ready(function() {
			$("#inputForm").validate({
				submitHandler: function(form){
					loading('正在提交，请稍等...');
                    saveTempeteSource();
				},
				errorContainer: "#messageBox",
				errorPlacement: function(error, element) {
					$("#messageBox").text("输入有误，请先更正。");
					if (element.is(":checkbox")||element.is(":radio")||element.parent().is(".input-append")){
						error.appendTo(element.parent().parent());
					} else {
						error.insertAfter(element);
					}
				}
			});
		});

        function saveTempeteSource(){
            var eleTempletId = $("#eleTempletId").val();
            var name = $("#name").val();
            var width =$("#width").val();
            var height =$("#height").val();
            var remarks =$("#remarks").val();
            $.ajax({
                type: "post",
                url: "${ctx}/templet/eleTemplet/saveTempeteSource",
                data: {eleTempletId: eleTempletId,
                    name: name,
                    width: width,
                    height: height,
                    remarks: remarks,
                    eleTempletSourceList: JSON.stringify(eleTempletSourceList)},
                dataType: "text",
                success: function(msg) {
                    if('success' == msg)
                        window.location.href="${ctx}/templet/eleTemplet/?repage";
                }
            });
        }

        function addDrapItem(obj){
            var con_cur = $(obj).find(".tu-cur");
            if(con_cur.length<=0){
                var img = $(obj).find(".tit_img").clone();
                img.css("width","100%");
                img.css("height","100%");
                var dlId = img.attr("id").split("_")[1];
                img.attr("id", "");

                var dl = "<dl id='"+dlId+"' onmousedown='selectSource(this)' onmouseup='setSourcePosition(this)'>"
                                +img[0].outerHTML
                            +"</dl>";

                $('#box').append(dl);

                $('#'+dlId).dragging({
                    move : 'both',
                    randomPosition : false,
                    width:"750px",
                    height:"500px"
                });

                selectSource($('#'+dlId)[0]);

                var cur = "<div class='tu-cur'><img src='${ctxStatic}/images/source/cur.png'></div>";
                $(obj).append(cur);
            }
        }
        var eleTempletSourceList = {};
        <c:forEach items="${eleTemplet.eleTempletSourceList}" var="source">
            var ${source.sourceType} = {};
            ${source.sourceType}.id='${source.id}';
            ${source.sourceType}.sourceType='${source.sourceType}';
            ${source.sourceType}.width=0+${0+source.width};
            ${source.sourceType}.height=0+${0+source.height};
            ${source.sourceType}.xloc=0+${0+source.xloc};
            ${source.sourceType}.yloc=0+${0+source.yloc};
            ${source.sourceType}.respath="${source.respath}";
            ${source.sourceType}.respath2="${source.respath2}";
            ${source.sourceType}.font="${source.font}";
            ${source.sourceType}.cfgfile="${source.cfgfile}";
            ${source.sourceType}.postion="${source.postion}";

            eleTempletSourceList.${source.sourceType} = ${source.sourceType};
        </c:forEach>

        function selectSource(obj) {
            var sourceType = obj.id;
            $("input[name='sourceType']").val(sourceType);

            var source = eleTempletSourceList[sourceType];
            if(!source){
                source = {};
                source.id = sourceType;
                source.width = 50;
                source.height = 50;
                source.xloc = 0;
                source.yloc = 0;
                source.respath="";
                source.respath2="";
                source.font="";
                source.cfgfile="";
                source.postion="";
            }

            $("#temSourceId").val(source.id);
            $("#source_width").val(source.width);
            $("#source_height").val(source.height);
            $("input[name='xloc']").val(source.xloc);
            $("input[name='yloc']").val(source.yloc);
            $("input[name='respath']").val(source.respath);
            $("input[name='respath2']").val(source.respath2);
            $("input[name='font']").val(source.font);
            eleTempletSourceList[sourceType] = source;
            mgrInput(sourceType)
        }

        function mgrInput(sourceType){
            var respath = $("input[name='respath']").parent().parent();
            var respath2 = $("input[name='respath2']").parent().parent();
            var font = $("input[name='font']").parent().parent();

            if(sourceType == 'image' || sourceType == 'video' || sourceType == 'image'){
                respath.show();
                respath2.hide();
                font.hide();
                respath.find('label').html("文件位置");
            }else if(sourceType == 'weather' || sourceType == 'words' || sourceType == 'time'
                    || sourceType == 'date' || sourceType == 'week' || sourceType == 'state'
                    || sourceType == 'floor' || sourceType == 'floored'){
                respath.hide();
                respath2.hide();
                font.show();
            }else if(sourceType == 'direction'){
                respath.show();
                respath2.show();

                respath.find('label').html("上行方向");

                font.hide();
            }
        }

        function setSourcePosition(obj){
            var sourceType = obj.id;
            var source = eleTempletSourceList[sourceType];
            if(!source){
                source = {};
            }
            source.xloc = $("input[name='xloc']").val();
            source.yloc = $("input[name='yloc']").val();
            eleTempletSourceList[sourceType] = source;
        }

        function inputChange(obj){
            var sourceType = $("input[name='sourceType']").val();

            var source = eleTempletSourceList[sourceType];

            var name = obj.name;
            source[name] = $(obj).val();

            var obj_img = $("#"+sourceType);

            if(name == 'width' || name == 'height'){
                obj_img.css(name,$(obj).val()+"px");
            }else if(name == 'xloc'){
                obj_img.parent().css('left',$(obj).val()+"px");
            }else if(name == 'yloc'){
                obj_img.parent().css('top',$(obj).val()+"px");
            }
        }
	</script>
</head>
<body>
	<ul class="nav nav-tabs">
		<li><a href="${ctx}/templet/eleTemplet/">模板列表</a></li>
		<li class="active"><a href="${ctx}/templet/eleTemplet/form?id=${eleTemplet.id}">模板<shiro:hasPermission name="templet:eleTemplet:edit">${not empty eleTemplet.id?'修改':'添加'}</shiro:hasPermission><shiro:lacksPermission name="templet:eleTemplet:edit">查看</shiro:lacksPermission></a></li>
	</ul>
	<form:form id="inputForm" modelAttribute="eleTemplet" action="${ctx}/templet/eleTemplet/save" method="post" class="breadcrumb form-search">
		<form:hidden id="eleTempletId" path="id"/><form:hidden path="flag"/>
		<sys:message content="${message}"/>
        <ul class="ul-form">
            <li><label>模板名称：</label>
                <form:input id="name" path="name" htmlEscape="false" maxlength="255" class="input-medium required"/>
            </li>
            <li><label>分辨率：</label>
                <form:input id="width" path="width" htmlEscape="false" maxlength="11" class="input-mini digits required"/>
                X
                <form:input id="height" path="height" htmlEscape="false" maxlength="11" class="input-mini digits required"/>
            </li>
            <li><label>备注信息：</label>
                <form:input id="remarks" path="remarks" htmlEscape="false" class="input-medium "/>
            </li>
        </ul>
        <div class="ul-form tu-con">
            <div id="sourceTypeList" class="tu-con-sou">
                <c:forEach items="${fns:getDictList('source_type')}" var="type">
                    <div class="tu-con-item" onclick="addDrapItem(this)">
                        <img id="img_${type.value}" class="tit_img" src="${ctxStatic}/images/source/${type.value}.png">
                        <span>${type.label}</span>
                    </div>
                </c:forEach>
            </div>
            <div style="width: 750px;height: 500px;float: left; ">
                <div id="box" class='box box-3'  style="width: 750px;height: 500px;">
                </div>
                <div style="float: right;margin-top: 10px;">
                    <shiro:hasPermission name="templet:eleTemplet:edit">
                        <input id="btnSubmit" class="btn btn-primary" type="submit" value="保存并预览" onclick="$('#flag').val('0');"/>&nbsp;
                    </shiro:hasPermission>
                </div>
            </div>
            <div style="width: 230px;float: left;margin-left: 10px;">
                <form:form id="inputForm" modelAttribute="eleTempletSource" action="${ctx}/source/alarm/eleSourceAlarmGroup/save" method="post" class="form-horizontal">
                    <input type="hidden" id="temSourceId" name="id"/>
                    <input type="hidden" name="sourceId"/>
                    <input type="hidden" name="sourceType"/>
                    <div class="control-group">
                        <label class="control-label">大小：</label>
                        <div class="controls">
                            <input id="source_width" name="width" class="input-mini " onkeyup="inputChange(this);"/>
                            <input id="source_height" name="height" class="input-mini " onkeyup="inputChange(this);"/>
                        </div>
                    </div>
                    <div class="control-group">
                        <label class="control-label">坐标：</label>
                        <div class="controls">
                            <input id="xloc" name="xloc" class="input-mini " onkeyup="inputChange(this);"/>
                            <input id="yloc" name="yloc" class="input-mini " onkeyup="inputChange(this);"/>
                        </div>
                    </div>
                    <div class="control-group">
                        <label class="control-label">文件位置：</label>
                        <div class="controls">
                            <form:hidden id="respath" path="respath" htmlEscape="false" maxlength="255" class="input-xlarge"/>
                            <sys:ckfinder input="respath" type="files" uploadPath="/templet/eleTemplet" selectMultiple="true"/>
                        </div>
                    </div>
                    <div class="control-group">
                        <label class="control-label">下行方向：</label>
                        <div class="controls">
                            <form:hidden id="respath2" path="respath2" htmlEscape="false" maxlength="255" class="input-xlarge"/>
                            <sys:ckfinder input="respath2" type="files" uploadPath="/templet/eleTemplet" selectMultiple="true"/>
                        </div>
                    </div>
                    <div class="control-group">
                        <label class="control-label">字体：</label>
                        <div class="controls">
                            <select name="font" class="input-small">
                                <c:forEach items="${fns:getDictList('font_type')}" var="item">
                                    <option value="${item.value}">${item.label}</option>
                                </c:forEach>
                            </select>
                        </div>
                    </div>
                </form:form>
            </div>
        </div>
	</form:form>

</body>
</html>